<template>
  <div class="box">
    <el-button type="primary" @click="add">添加分类</el-button>
    <!-- 树形表格插件 -->
    <tree-table
      :data="tableData"
      :columns="defaultProps"
      :selection-type="false"
      :expand-type="false"
      index-text="序号"
      :show-row-hover="false"
      show-index
      border
      style="margin-top: 20px"
    >
      <!-- 是否有效 -->
      <template slot="isok" slot-scope="scope">
        <i
          :class="[
            scope.row.cat_deleted ? 'el-icon-success' : 'el-icon-error',
            scope.row.cat_deleted ? 'succ' : 'err',
          ]"
        ></i>
      </template>
      <!-- 排序 -->
      <template slot="level" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
        <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
      </template>
      <!-- 操作 -->
      <template slot="caozuo" slot-scope="scope">
        <el-button size="mini" icon="el-icon-edit" @click="bj(scope.row)"
          >编辑</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"
          >删除</el-button
        >
      </template>
    </tree-table>
    <!-- 添加分类模态框 -->
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%">
      <!-- 添加表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="ruleForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类" prop="value">
          <!-- checkStrictly:出现圆圈 -->
          <el-cascader
            v-model="value"
            :options="tableData1"
            :props="{
              expandTrigger: 'hover',
              label: 'cat_name',
              value: 'cat_id',
              checkStrictly: true,
            }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="qType">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑模态框 -->
    <el-dialog title="修改商品分类" :visible.sync="dialogVisible1" width="50%">
      <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="ruleForm1.cat_name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="qEdit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
    style="text-align:center;margin-top:20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pagenum"
      :page-sizes="[1, 3, 5, 8]"
      :page-size="pageInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import TreeTable from "vue-table-with-tree-grid";
export default {
  name: "",
  components: {
    TreeTable
  },
  data() {
    return {
      value: [],
      // 请求商品分类列表的参数
      pageInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 10, //全部数据条数
      tableData: [], //商品分类列表
      tableData1: [], //商品分类列表
      // tree表格的属性
      defaultProps: [
        { label: "分类名称", prop: "cat_name" },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "isok",
        },
        {
          label: "分类等级",
          prop: "cat_level",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "caozuo",
        },
      ],
      dialogVisible: false, //添加分类模态框开关
      dialogVisible1: false, //编辑分类模态框开关
      ruleForm: {
        //添加分类的信息
        cat_name: "", //添加的分类名
        cat_pid: "", //父级id
        cat_level: 0, //等级
      },
      ruleForm1: {
        cat_name: "",
      // 点编辑获取当前分类的id
        id:""
      },
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
      rules1: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // 获取一级和二级分类 ，在添加商品分类中使用
    
    this.getTypeList();
  },
  mounted() {},
  methods: {
    // 获取商品分类列表
    getTypeList() {
      this.$store.dispatch("getgoods", this.pageInfo).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message.success(res.data.meta.msg);
          this.tableData = res.data.data.result;
          this.total = res.data.data.total;
        }
      });
    },
    // 弹出添加分类模态框
    add() {
      this.dialogVisible = true;
      this.$store
      .dispatch("getgoods", {
        type: 2,
        pagenum: this.pageInfo.pagenum,
        pagesize: this.pageInfo.pagesize,
      })
      .then((res) => {
        if (res.data.meta.status == 200) {
          this.$message.success(res.data.meta.msg);
          this.tableData1 = res.data.data.result;
          this.total = res.data.data.total;
        }
      });
    },
    // 获取选中的分类
    handleChange(value) {
      // 大于0说明不知一层，获取value数组最后的pid，得到选中前一层的父id
      if (value.length > 0) {
        this.ruleForm.cat_pid = value[value.length - 1];
        this.ruleForm.cat_level = value.length;
      }
      // 一层默认父id和等级是0
      else {
        this.ruleForm.cat_pid = 0;
        this.ruleForm.cat_level = 0;
      }
    },
    // 确认添加
    qType() {
      this.$store.dispatch("qTypeAdd", this.ruleForm).then((res) => {
        if (res.meta.status == 201) {
          this.$message.success(res.meta.msg);
          this.dialogVisible = false;
          this.ruleForm = {
            cat_name: "", 
            cat_pid: "",
            cat_level: 0,
          };
          // 重新渲染页面
          this.getTypeList();
        }
      });
    },
    // 删除
    del(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除请求
          this.$store.dispatch("DelType", row).then((res) => {
            console.log(res);
            if (res.meta.status == 200) {
              this.$message.success(res.meta.msg);
              this.getTypeList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 每页数据条数
    handleSizeChange(val) {
      this.pageInfo.pagesize = val;
      this.getTypeList();
    },
    // 当前页码
    handleCurrentChange(val) {
      this.pageInfo.pagenum = val;
      this.getTypeList();
    },
    // 编辑
    bj(row) {
      this.dialogVisible1 = true;
      this.ruleForm1.id = row.cat_id;
      // 数据回显
      this.ruleForm1.cat_name = row.cat_name;
    },
    // 确认编辑
    qEdit(){
      this.$store.dispatch("qEditType",this.ruleForm1).then(res=>{
        console.log(res);
        if(res.meta.status==200){
          this.$message.success(res.meta.msg)
          this.dialogVisible1=false
          this.getTypeList();
        }
      })
    }
  },
};
</script>

<style scoped lang='scss'>
.succ {
  color: green;
}
.err {
  color: red;
}
</style>
